<template>
  <div class="corp">
    <!-- 头部功能模块 -->
    <div class="head">
      <!-- 顶部搜索模块 -->
      <div class="top">
        <van-row>
          <van-col span="4">
            <span class="title">公司</span>
          </van-col>
          <van-col span="20">
            <van-search
              v-model="value"
              shape="round"
              @search="onSearch"
              placeholder="请输入搜索关键词"
            />
          </van-col>
        </van-row>
      </div>

      <!-- 广告图片模块 -->
      <div class="ad">
        <img src="../assets/companyAD.png" alt="" />
      </div>

      <!-- 筛选模块 -->
      <div class="filter">
        <van-row type="flex" justify="space-between" style="font-size: 5vw">
          <van-col span="5">
            <span>推荐</span>
          </van-col>
          <van-col span="5">
            <span>距离</span>

            <!-- 上下箭头 -->
            <span style="position: relative">
              <van-icon
                name="arrow-up"
                size="3vw"
                style="position: absolute; top: -5vw"
              />
              <van-icon
                name="arrow-down"
                size="3vw"
                style="position: absolute; bottom: -0.8vw"
              />
            </span>
          </van-col>

          <van-col span="5">
            <span>评分</span>

            <!-- 上下箭头 -->
            <span style="position: relative">
              <van-icon
                name="arrow-up"
                size="3vw"
                style="position: absolute; top: -5vw"
              />
              <van-icon
                name="arrow-down"
                size="3vw"
                style="position: absolute; bottom: -0.8vw"
              />
            </span>
          </van-col>
          <van-col span="9"
            ><span style="margin-left: 50px">筛选</span></van-col
          >
        </van-row>
      </div>
    </div>

    <!-- 公司列表模块 -->
    <div class="body">
      <!-- 公司列表 -->
      <div class="list" v-for="(item, index) in list" :key="index" @click="$router.push(`/companyDetail/${item.id}`)">
        <!-- 各公司logo -->
        <div class="logos">
          <img :src="'http://hmmm.zllhyy.cn/' + item.logo" alt="" />
        </div>
        <!-- 各公司信息 -->
        <div class="info">
          <div class="top">
            <div class="left">
              <div class="name">{{ item.name }}</div>
              <div class="add">{{ item.region }} {{ item.distance }}</div>
            </div>
            <div class="right">{{ item.score }}分</div>
          </div>
          <div class="tag">
            <van-tag
              type="primary"
              color="#f7f4f5"
              text-color="#b4b4bd"
              style="margin: 3px 4px 3px 0"
              >{{ item.type }}</van-tag
            >
            <van-tag
              type="primary"
              color="#f7f4f5"
              text-color="#b4b4bd"
              style="margin: 3px 4px"
              >{{ item.step }}</van-tag
            >
            <van-tag
              type="primary"
              color="#f7f4f5"
              text-color="#b4b4bd"
              style="margin: 3px 4px"
              >{{ item.scale }}</van-tag
            >
          </div>
          <div class="bottom">
            在招职位：<span>{{ item.positions }}</span> / 最后更新时间:
            {{ formatTime(item.updated_at) }}
          </div>
        </div>
      </div>
      <!-- 数据最底部 -->
      <div class="noData" v-if="noData">没有更多了</div>
    </div>
    <!-- 底部适配盒子 -->
    <div class="foot"></div>
  </div>
</template>

<script>
// 导入接口
import { companyListAPI } from '@/api/company'

export default {
  name: 'CompanyModule',
  data () {
    return {
      value: '',
      list: [],
      page: 0,
      noData: false,
      total: 0,
      // 设置一个开关来避免重负请求数据
      is_extending: true
    }
  },
  created () {
    // 初始化渲染
    this.loadData()
  },
  mounted () {
    // 滚动监听事件
    window.addEventListener('scroll', this.pages)
  },
  // 页面离开之后，移除滚动监听事件
  beforeDestroy () {
    window.removeEventListener('scroll', this.pages)
  },
  methods: {
    // 获取数据(初始)
    async loadData () {
      console.log(this.value)
      const res = await companyListAPI({
        start: this.page,
        limit: 5,
        q: this.value
      })
      // 数据传入数组
      this.list = res.data.list
      // 保存数据总数
      this.total = res.data.total
      // 请求成功打开下滑
      this.is_extending = true
      // 搜索完第一页不显示无更多
      this.noData = false
      // 没有数据显示无更多
      if (this.list.length === 0) {
        this.noData = true
      }
    },
    // 请第二页以后的数据
    async loadDatas () {
      this.page++
      // 没有数据显示无更多
      if (this.total / 5 < this.page) {
        this.noData = true
      } else {
        const res = await companyListAPI({
          start: this.page,
          limit: 5,
          q: this.value
        })
        // 数据传入数组
        this.list = this.list.concat(res.data.list)
        // 请求成功打开下滑
        this.is_extending = true
        // 保存数据总数
        this.total = res.data.total
      }
    },

    // 时间格式
    formatTime (date) {
      return this.dayjs(date).format('YYYY.MM.DD')
    },

    // 滑到底部的方法
    pages () {
      const scroll =
        document.documentElement.scrollTop || document.body.scrollTop
      const OSH = document.documentElement.offsetHeight
      // 判断是否滑到底部
      if (scroll + window.innerHeight + 20 >= OSH) {
        // 判断重复请求
        if (this.is_extending) {
          // 滑一次就关闭
          this.is_extending = false
          this.loadDatas()
        }
      }
    },

    // 搜索框键盘事件
    onSearch () {
      this.page = 0
      this.loadData()
      console.log(this.value)
    }

  }
}
</script>

<style scoped lang="less">
.corp {
  // 头部功能模块
  .head {
    background-color: #fff;
    position: fixed;
    top: 0px;
    z-index: 1;

    // 顶部标题搜索栏
    .top {
      padding: 12px 14px;
      // 顶部标题
      .title {
        height: 100%;
        line-height: 50px;
        font-size: 18px;
        font-weight: 700;
        align-items: center;
      }
    }

    // 广告模块
    .ad {
      padding: 0 13px 8px;
      img {
        width: 100%;
        background-repeat: no-repeat;
      }
    }

    // 筛选模块
    .filter {
      span {
        display: inline-block;
        transform: scale(0.8);
      }
    }
  }

  // 公司列表模块
  .body {
    margin-top: 65vw;
    padding: 0 13px;

    .list {
      display: flex;
      border-bottom: solid 1px rgb(238, 239, 242);
      padding: 15px 0;
      .logos {
        width: 20%;
        margin-right: 10px;
        img {
          width: 100%;
        }
      }
      .info {
        flex: 1;
        text-align: left;

        .top {
          display: flex;
          .left {
            width: 80%;
            .name {
              font-size: 18px;
            }
            .add {
              font-size: 12px;
              color: #545671;
              margin-top: 3px;
            }
          }
          .right {
            flex: 1;
            font-size: 12px;
            color: #545671;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .tag {
          margin-top: 8px;
        }
        .bottom {
          font-size: 12px;
          color: #b4b4bd;
          margin-top: 10px;
          span {
            color: #53b5d1;
          }
        }
      }
    }
  }

  // 底部盒子
  .foot {
    height: 3rem;
  }
}
</style>
